<div class="list-box-container">
  <div class="main-list-box">
    <div class="box-top">
      <div class="left-mark">
        <label nz-checkbox [(ngModel)]="isAllSelected" (ngModelChange)="updateAllSelected()">全选</label>
      </div>
      <div class="right-title">今日事今日毕，勿将今事待明日!.☕
        <span class="user-name">
               <i nz-icon nzType="user"></i>
          {{userInfo.username}}
             </span>
      </div>
    </div>
    <div class="box-main">
      <ul>
        <li *ngFor="let todoItem of filterDate">
          <div class="todo-main-row" [class.completed]="todoItem.completed" (dblclick)="onEditTodo(todoItem._id)">
            <div class="btn-finish">
              <label nz-checkbox [(ngModel)]="todoItem.completed" (ngModelChange)="updateUnfinishedTodos([todoItem._id], todoItem.completed)"></label>
            </div>
            <div class="text-title" >{{todoItem.title}}</div>
            <div class="todo-btn btn-delete" (click)="deleteTodolist(todoItem._id)">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.0993 17.7597C15.7949 18.2098 16.7235 18.0108 17.1736 17.3152C17.6236 16.6197 17.4246 15.6911 16.7291 15.241C13.3079 13.0273 10.8209 10.9959 8.92251 9.03739C9.09742 8.84982 9.27291 8.66571 9.44888 8.48534C11.8864 5.98692 14.2472 4.38066 16.2944 3.97122C17.1067 3.80875 17.6335 3.01852 17.4711 2.20618C17.3086 1.39384 16.5184 0.867013 15.706 1.02948C12.7532 1.62005 9.86406 3.76379 7.30154 6.39037C7.18151 6.5134 7.06181 6.63789 6.94249 6.76375C5.42001 4.80433 4.37058 2.87632 3.42591 0.863164C3.07399 0.113202 2.18073 -0.209475 1.43077 0.142445C0.680809 0.494365 0.358132 1.38762 0.710051 2.13758C1.82088 4.50481 3.07899 6.76511 4.92932 9.05306C3.22206 11.1341 1.62669 13.4328 0.222723 15.7142C-0.211453 16.4197 0.00852752 17.3437 0.714064 17.7778C1.4196 18.212 2.34352 17.992 2.7777 17.2865C4.04819 15.222 5.46405 13.1726 6.95559 11.3168C8.985 13.3765 11.5959 15.4928 15.0993 17.7597Z" fill="#33322E"/>
              </svg>
            </div>
          </div>
          <div class="todo-edit" *ngIf="currentEditId === todoItem._id">
            <div class="input-edit">
              <input nz-input [(ngModel)]="todoItem.title" #editInput/>
            </div>
            <div class="todo-btn btn-edit-finished" (click)="upadteTodo(todoItem._id, todoItem.title)">
              <svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.5084 10.3109C17.2324 10.5823 18.0394 10.2155 18.3109 9.49157C18.5823 8.7676 18.2155 7.96063 17.4916 7.68914L16.5084 10.3109ZM8.9999 2L10.1321 1.17655C9.8558 0.796618 9.40735 0.580605 8.93802 0.601368C8.4687 0.62213 8.04107 0.876899 7.79938 1.27974L8.9999 2ZM7.67175 17.5572C7.42722 18.2907 7.82362 19.0836 8.55713 19.3281C9.29064 19.5727 10.0835 19.1763 10.328 18.4428L7.67175 17.5572ZM1.09963 7.92793C0.507541 8.42519 0.430669 9.30828 0.927931 9.90037C1.42519 10.4925 2.30828 10.5693 2.90037 10.0721L1.09963 7.92793ZM17.4916 7.68914C15.8023 7.05565 13.9841 5.5036 12.5099 3.96795C11.793 3.22122 11.1939 2.5174 10.7744 2.00056C10.5651 1.74269 10.4017 1.53276 10.2919 1.38908C10.237 1.31727 10.1956 1.26211 10.1686 1.2259C10.1551 1.2078 10.1453 1.19444 10.1391 1.18612C10.1361 1.18195 10.134 1.17905 10.1328 1.17744C10.1322 1.17664 10.1318 1.17616 10.1317 1.17601C10.1317 1.17593 10.1317 1.17594 10.1317 1.17603C10.1318 1.17607 10.1319 1.1762 10.1319 1.17623C10.132 1.17637 10.1321 1.17655 8.9999 2C7.86767 2.82345 7.86783 2.82367 7.868 2.8239C7.86808 2.82401 7.86826 2.82426 7.86842 2.82447C7.86872 2.8249 7.86909 2.8254 7.86953 2.82599C7.87039 2.82718 7.8715 2.82869 7.87285 2.83054C7.87554 2.83423 7.87922 2.83924 7.88385 2.84553C7.8931 2.85811 7.90619 2.87582 7.92298 2.89837C7.95656 2.94345 8.00499 3.00792 8.0673 3.08944C8.19185 3.25239 8.37217 3.48387 8.60038 3.76506C9.05593 4.32635 9.70685 5.09128 10.49 5.90705C12.0158 7.4964 14.1977 9.44435 16.5084 10.3109L17.4916 7.68914ZM7.61397 2.19801C8.10669 5.64669 8.34997 8.82926 8.34997 11.5C8.34997 14.2015 8.10014 16.2722 7.67175 17.5572L10.328 18.4428C10.8998 16.7278 11.15 14.2986 11.15 11.5C11.15 8.67076 10.8932 5.35331 10.3858 1.80199L7.61397 2.19801ZM2.90037 10.0721C3.88228 9.24742 5.29636 8.09033 6.64379 6.8301C7.97664 5.58352 9.34587 4.14458 10.2004 2.72026L7.79938 1.27974C7.15402 2.35542 6.02331 3.57663 4.73118 4.78513C3.45364 5.97998 2.11772 7.07289 1.09963 7.92793L2.90037 10.0721Z" fill="#33322E"/>
              </svg>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="box-bottom">
      <span *ngIf="unFinisdedNum; else showElse">剩余 {{unFinisdedNum}} 项未完成</span>
      <ng-template #showElse>
        <span>完美收工!</span>
      </ng-template>
    </div>
  </div>
</div>
